<!--  -->
<template>
  <div class="login">
    <div class="login-box">
      <h1>Baolem后台管理系统</h1>
      <!-- 头像区域 -->
      <div class="avtar_box">
        <img src="../assets/logo.jpg" alt="" />
      </div>

      <!-- 登录框开始 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="80px"
        class="login_form"
      >
        <el-form-item label="账 号 :" prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item label="密   码 :" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-unlock"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row :span="24">
            <el-col :span="12">
              <el-input
                v-model="loginForm.code"
                auto-complete="off"
                placeholder="请输入验证码"
                size=""
                @keyup.enter.native="login('loginForm')"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <div class="login-code" @click="refreshCode">
                <!--验证码组件-->
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登 录</el-button>
          <el-button type="info" @click="resetLoginForm">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import myaxios from "@/myaxios/myaxios";
import { login } from "@/api/api";
import SIdentify from "@/components/common/SIdentify";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { SIdentify },
  data() {
    //这里存放数据
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: "",
      //表单验证规则
      loginFormRules: {
        username: [
          { required: true, message: "请重新输入用户名", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 5 到 10个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码错误请重新输入", trigger: "blur" },
          { min: 5, max: 16, message: "长度在 6到 16个字符", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //点击重置按钮，重置登录表单
    resetLoginForm() {
      //console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    //点击刷新验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //刷新四个值
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },

    //点击登录按钮的验证
    login() {
      //验证码
      if (this.loginForm.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
      this.$message.error('请填写正确验证码')
      this.refreshCode()
      return
      }
      //账号密码
      this.$refs.loginFormRef.validate(async (valid) => {
        //   console.log(valid);
        if (valid) {
          // this.$message("检验成功了");
          let result = await login({
            user_name: this.loginForm.username,
            password: this.loginForm.password,
          });
          if (result.status === 1) {
            console.log(result);
            // this.$message("成功");
            this.$message({
              type:"success",
              message:"登录成功"
            });
            // window.sessionStorage.setItem("token",res.data.token);
            //进行路由跳转
            this.$router.push("dashboard");
            window.localStorage.setItem("token", 'result.data.token');
          }
        } else {
          this.$message({
            type: "warning",
            message: "账号或密码错误",
          });
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.login {
  background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20190930/788dd76b662e47c78f735e7a8131981e.jpeg);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 200px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
  .login-box {
    width: 450px;
    height: 400px;
    background-color: #fff;
    border-radius: 20px;
    opacity: 0.9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .avtar_box {
      width: 100px;
      height: 100px;
      border: 1px solid #ddd;
      border-radius: 50%;
      box-shadow: 0 0 6px #ccc;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #111;
        border: 8px #fff solid;
        box-shadow:0 0 15px #fff;
      }
    }
    h1 {
      font-weight: bolder;
      color: rgb(221, 117, 117);
      text-align: center;
      position: absolute;
      top: -100px;
      left: 16%;
    }
  }
  /deep/ .el-form-item__label:before {
    display: none;
  }
}
.login_form {
  padding-right: 30px;
  position: absolute;
  bottom: 50px;
  width: 100%;
}
.btns {
  display: flex;
  justify-content: space-around;
  padding-right: 50px;
}
</style>
